<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>General</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/medile.css" rel='stylesheet' type='text/css' />
<link href="css/single.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="css/contactstyle.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/faqstyle.css" type="text/css" media="all" />
<!-- font-awesome icons -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- //font-awesome icons -->
<!-- news-css -->
<link rel="stylesheet" href="news-css/news.css" type="text/css" media="all" />
<!-- //news-css -->
<!-- list-css -->
<link rel="stylesheet" href="list-css/list.css" type="text/css" media="all" />
<!-- //list-css -->
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
<link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
<script src="js/owl.carousel.js"></script>
<script>
	$(document).ready(function() { 
		$("#owl-demo").owlCarousel({
	 
		  autoPlay: 3000, //Set AutoPlay to 3 seconds
	 
		  items : 5,
		  itemsDesktop : [640,5],
		  itemsDesktopSmall : [414,4]
	 
		});
	 
	}); 
</script> 
</head>
	
<body>
<!-- header -->

<!-- //header -->
<!-- bootstrap-pop-up -->
	
	<script>
		$('.toggle').click(function(){
		  // Switches the Icon
		  $(this).children('i').toggleClass('fa-pencil');
		  // Switches the forms  
		  $('.form').animate({
			height: "toggle",
			'padding-top': 'toggle',
			'padding-bottom': 'toggle',
			opacity: "toggle"
		  }, "slow");
		});
	</script>
<!-- //bootstrap-pop-up -->
<!-- nav -->



<!-- //nav -->

<!-- /w3l-medile-movies-grids -->

		<div class="w3l-medile-movies-grids">

				<!-- /movie-browse-agile -->
				
				      <div class="movie-browse-agile">
					     <!--/browse-agile-w3ls -->
						<div class="browse-agile-w3ls general-w3ls">
								<div class="tittle-head">

									<h4 class="latest-text">题材搜索:${param.typeName}</h4><!-- 动态获取数据库类型 -->

								</div>

								<div class="container" id="context">
								
									<div class="browse-inner">
									   <div class="col-md-2 w3l-movie-gride-agile">
													 <a href="single.html" class="hvr-shutter-out-horizontal"><img src="images/m7.jpg" title="album-name" alt=" " />
												    	 <div class="w3l-action-icon">
												    	 	<i class="fa fa-play-circle" aria-hidden="true"></i>
												    	 </div>
													</a>
												  <div class="mid-1">
													<div class="w3l-movie-text">
														<h6><a href="single.html">Light B/t Oceans</a></h6>							
													</div>
													<div class="mid-2">
														<p>2016</p>
														<div class="block-stars">
															<ul class="w3l-ratings">
																 <li>评分：</li>
															</ul>
														</div>
														<div class="clearfix"></div>
													</div>
														
												</div>
									 	  

										</div>
										   		
										<!-- <div class="clearfix"> </div> -->

									</div>


										

								</div>
						</div>
				<!--//browse-agile-w3ls -->
						<div class="blog-pagenat-wthree" >

							<ul id="blog-pagenat-wthree">
								<li><a class="frist" href="#">上一页</a></li>

								<li><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a class="last" href="#">Next</a></li>
							</ul>
						</div>
					</div>
				    <!-- //movie-browse-agile -->
				   <!--body wrapper start-->
				<!--body wrapper start-->
					<div class="review-slider">
						 <h4 class="latest-text">精选电影</h4>
						       <div class="container">

						       		 	<div class="swiper-container w3_agile_banner_bottom_grid ">
							  					<div class="swiper-wrapper">
							  					
							  					
						       					</div>
						       			</div>
		
										
								 </div>

						<!--body wrapper end-->
							</div>	
				</div>	
		</div>
	<!-- //w3l-medile-movies-grids -->
	
	<!-- //comedy-w3l-agileits -->
<!-- footer -->
	
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    );
});
</script>
	<script type="text/javascript">

		$(document).ready(function() {
			//点击量
			$(document).on("click",".movie",function(){
				var i=$(this).attr("data-id");

				
				 $.ajax({
				     
			         type: "POST",//方法类型
			         dataType: "json",//预期服务器返回的数据类型
			         url: "${pageContext.request.contextPath}/AdminServlet" ,//url
			         data:{op:"addCount",id:i},
			         success: function (result,status,xhr) {

			         } ,
			         error : function() {
			             alert("错误！");
			         }
			     });
			});
			
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			 $.ajax({
			     
		         type: "POST",//方法类型
		         dataType: "json",//预期服务器返回的数据类型
		         url: "${pageContext.request.contextPath}/AdminServlet" ,//url
		         data:{op:"findbyname",pageNum:1,pageSize:12},
		         success: function (result,status,xhr) {
		        	 var val=eval(result);
		        	 var movie=val.movies;
		        	 
		        	 show(movie);
		         } ,
		         error : function() {
		             alert("错误！");
		         }
		     });
			 
				$(document).on("click",".page",function(){
					var i=$(this).text();
					
					 $.ajax({
					     
				         type: "POST",//方法类型
				         dataType: "json",//预期服务器返回的数据类型
				         url: "${pageContext.request.contextPath}/AdminServlet" ,//url
				         data:{op:"findbyname",pageNum:i,pageSize:12},
				         success: function (result,status,xhr) {
				        	 var val=eval(result);
				        	 var movie=val.movies;
				        	 show(movie);
				        	 
				         } ,
				         error : function() {
				             alert("错误！");
				         }
				     });
				});
				$(document).on("click","#pre",function(){
					var i=$("#pageNum").text();
					if(i==1){
						i=1;
					}if(i>1){
						i=i-1;
					}
					 $.ajax({
					     
				         type: "POST",//方法类型
				         dataType: "json",//预期服务器返回的数据类型
				         url: "${pageContext.request.contextPath}/AdminServlet" ,//url
				         data:{op:"findbyname",pageNum:i,pageSize:12},
				         success: function (result,status,xhr) {
				        	 var val=eval(result);
				        	 var movie=val.movies;
				        	 show(movie);
				        	 
				         } ,
				         error : function() {
				             alert("错误！");
				         }
				     });
				});
				$(document).on("click","#next",function(){
					var i=$("#pageNum").text();
					
					if(parseInt(i)<$("#total").text()){
						i=parseInt(i)+1;
					}if(i==$("#total").text()){
						i=$("#total").text();
					}
					
					 $.ajax({
					     
				         type: "POST",//方法类型
				         dataType: "json",//预期服务器返回的数据类型
				         url: "${pageContext.request.contextPath}/AdminServlet" ,//url
				         data:{op:"findbyname",pageNum:i,pageSize:12},
				         success: function (result,status,xhr) {
				        	 var val=eval(result);
				        	 var movie=val.movies;
				        	 
				        	 show(movie);
				         } ,
				         error : function() {
				             alert("错误！");
				         }
				     });
				});

});
		function show(result){
			// 清空表格原始数据
			$("#blog-pagenats").empty();
			// 渲染表格中的数据
			
				// 渲染表格数据
				showData(result.data);
				$("#blog-pagenats").append("<div style=\"visibility:hidden\"><span id=\"total\">"+result.pages+"</span><span id=\"pageNum\" >"+result.pageNum+"</span></div>");
				$("#blog-pagenats").append("<li><a class=\"frist\" id=\"pre\" href=\"#\">上一页</a></li>");

				
				for(var i = 1; i <= result.pages; i++){
					if(i==result.pageNum){
						$("#blog-pagenats").append("<li><a style=\"background-color: #27a9e3\" class=\"page\" href=\"#\">"+i+"</a></li>");
					}else{
						$("#blog-pagenats").append("<li><a class=\"page\" href=\"#\">"+i+"</a></li>");
					}
				}
				$("#blog-pagenats").append("<li><a class=\"last\" id=\"next\" href=\"#\">下一页</a></li>");
				}		
		
		function showData(result){
			// 清空表格原始数据
			$("#resulthead").empty();
			// 渲染表格中的数据
			$.each(result,function(index,movies){
				$("#resulthead").append("<div class=\"col-md-2 w3l-movie-gride-agile\">"
						 +"<a class=\"movie\" data-id=\""+movies.movieId+"\" href=\"single.jsp?id="+movies.movieId+"\" class=\"hvr-shutter-out-horizontal\"><img style=\"width:182px;height:268px\" src=\""+movies.moviePicture+"\" title=\"album-name\" alt=\" \" />"
						  +"<div class=\"w3l-action-icon\"><i class=\"fa fa-play-circle\" aria-hidden=\"true\"></i></div>"
						+"</a>"
						  +"<div class=\"mid-1\">"
							+"<div class=\"w3l-movie-text\">"
								+"<h6><a href=\"single.jpg?id=21881\">"+movies.movieName+"</a></h6>"							
							+"</div>"
							+"<div class=\"mid-2\">"
				                    +"<p>"+movies.moviePublishDate+"</p>"
								+"<div class=\"block-stars\">"
									+"<ul class=\"w3l-ratings\">"
										     +"<li>评分"+movies.movieRating+"</li>"
                                  +"</ul>"
								+"</div>"
								+"<div class=\"clearfix\"></div>"
							+"</div>"
								
						+"</div>"
						+"</div>");
			});
		}
	</script>

	<script>
	
		var typeName="${param.typeName}";
		var op="${param.op}";
		//初始化页面信息
		var numPage = 1;//当前页面
		
	 	if(typeName!=null){
			 $.ajax({//ajax请求电影类型
				 async:true,
				 type:"get",
			     dataType:"json", 
				 url:"${pageContext.request.contextPath}/MoviesSearch",
				 data:{
					 op:"pageInfoByMoviesType",
					 typeName:typeName,
					 pageNum:numPage,//当前页面
					 pageSize:12//页面显示数固定数
				 },
				 
				 success:function(result,status,xhr){
						console.log(result)
						fullListMovies(result.data);
						fullPageInfo(result);
					
				 
				 },
				 error:function(error,status){
					 console.log(status);
					console.log(error)
				 }
				
			});  
		} 
	 	
	 	
		function fullListMovies(result){
			$("#context").empty();
			
			$("#context").append("<div class=\"browse-inner\">");
			$.each(result,function(index,movies){
				$("#context").append(" <div class=\"col-md-2 w3l-movie-gride-agile\">"+
							"<a href=\"single.jsp?id="+movies.movieId+"\" class=\"hvr-shutter-out-horizontal\"><img  style=\"height:268px; width:182px;\" src=\""+movies.moviePicture+"\" title=\"album-name\" alt=\" \" />"+
						    	"<div class=\"w3l-action-icon\">"+
						    	 	"<i class=\"fa fa-play-circle\" aria-hidden=\"true\"></i>"+
						    	 "</div>"+
							"</a>"+
						  "<div class=\"mid-1\">"+
							"<div class=\"w3l-movie-text\">"+
								"<h6><a href=\"single.jsp?id="+movies.movieId+"\">"+movies.movieName+"</a></h6>"+							
							"</div>"+
							"<div class=\"mid-2\">"+
								"<p>"+movies.moviePublishDate+"</p>"+
								"<div class=\"block-stars\">"+
									"<ul class=\"w3l-ratings\">"+
										 "<li>评分:"+movies.movieRating+"</li>"+
									"</ul>"+
								"</div>"+
								"<div class=\"clearfix\"></div>"+
							"</div>"+	
						"</div>"+
					"</div>")}
				)
	}	
		
	
		function fullPageInfo(result){
			$("#blog-pagenat-wthree").empty();
			$("#blog-pagenat-wthree").append("<div style=\"visibility:hidden\"><span id=\"total\">"+result.pages+"</span><span id=\"pageNum\" >"+result.pageNum+"</span></div>");
			$("#blog-pagenat-wthree").append("<li><a class=\"frist\" href\"javascript:void(0)\">上一页</a></li>")
			for(var i = 1 ; i<=result.pages;i++){
				if(i==result.pageNum){
					$("#blog-pagenat-wthree").append("<li><a href=\"javascript:void(0)\"  style=\"background-color: #27a9e3\"  class=\"indexpage\" index=\""+i+"\">"+i+"</a></li>");
				}else{
					
					$("#blog-pagenat-wthree").append("<li><a href=\"javascript:void(0)\"  class=\"indexpage\" index=\""+i+"\">"+i+"</a></li>");
				}
			}
			$("#blog-pagenat-wthree").append("<li><a class=\"last\" href=\"javascript:void(0)\">下一页</a></li>");	
		}
		$(document).on("click",".indexpage",function(){
			numPage=$(this).attr("index");
			ajaxPageInfo(numPage,typeName);//传入当前页面和类型参数	
		})
				
		function ajaxPageInfo(numPage,typeName){//ajax分页
			 $.ajax({
				 async:true,
				 type:"get",
					dataType:"json", 
				 url:"${pageContext.request.contextPath}/MoviesSearch",
				 data:{
					 op:"pageInfoByMoviesType",
					 pageNum:numPage,//当前页面
					 pageSize:12,//页面显示数固定数
					 typeName:typeName
				 },
				 
				 success:function(result,status,xhr){
						console.log(result)
						fullListMovies(result.data);
						fullPageInfo(result);
				 },
				 error:function(error,status){
					 console.log(status);
					console.log(error)
				 }
				
			});  
			
		}
		
		//上一页和下一页排序
		
		$(document).on("click",".frist",function(){
					numPage=$("#pageNum").text();
					if(numPage==1){
						numPage=1;
					}if(numPage>1){
						numPage=numPage-1;
					}
				ajaxPageInfo(numPage,typeName);//传入当前页面和类型参数	
		})
		$(document).on("click",".last",function(){
					numPage=parseInt($("#pageNum").text());
					if(numPage<$("#total").text()){
						numPage=numPage+1;
					}if(numPage==$("#total").text()){
						numPage=$("#total").text();
					}
				ajaxPageInfo(numPage,typeName);//传入当前页面和类型参数	
		})
		
		
		//底部精选电影排序(先评分后点击量)：
		
		 $.ajax({//ajax
				 async:true,
				 type:"get",
			     dataType:"json", 
				 url:"${pageContext.request.contextPath}/MoviesSearch",
				 data:{
					 op:"searchMoviesByQualityChoice",
					 score:"yes",
					 clickCount:"yes"
				 },
				 
				 success:function(result,status,xhr){
					 result=result.slice(0,6);
						console.log("总精选电影:"+result)
						
						 selectTheMovies(result);
 					
				 
				 },
				 error:function(error,status){
					 console.log(status);
					console.log(error)
				 }
				
			});  
			//精选电影的布局：
			function selectTheMovies(result){	
				 $(".swiper-wrapper").empty();	
					$.each(result,function(index,movies){
						
						$(".swiper-wrapper").append("<div class=\"swiper-slide w3l-movie-gride-agile\">"+
						  		"<a class=\"movie\" data-id=\""+movies.movieId+"\" href=\"single.jsp?id="+movies.movieId+"\" class=\"hvr-shutter-out-horizontal\"><img  style=\"height:268px; width:182px;\"  src=\""+movies.moviePicture+"\" title=\"album-name4\" class=\"img-responsive\" alt=\" \" />"+
									"<div class=\"w3l-action-icon\"><i class=\"fa fa-play-circle\" aria-hidden=\"true\"></i></div>"+
								"</a>"+
								"<div class=\"mid-1 agileits_w3layouts_mid_1_home\">"+
										"<div class=\"w3l-movie-text\">"+
											"<h6><a href=\"single.jsp?id="+movies.movieId+"\">"+movies.movieName+"</a></h6>"+							
										"</div>"+
										"<div class=\"mid-2 agile_mid_2_home\">"+
											"<p style=\" float: unset;line-height: 15px;\">"+movies.moviePublishDate+"</p>"+
											"<div class=\"block-stars\">"+
												"<ul class=\"w3l-ratings\">"+
													"<li style=\"position: absolute;left: 70px;\">评分:"+movies.movieRating+"</li>"+
												"</ul>"+
											"</div>"+
											"<div class=\"clearfix\"></div>"+
										"</div>"+
								"</div>"+
						"</div>");	
						
					})
			}
			
		</script><!--精选电影的轮播图  -->
		
		<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">  
		<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">  
		<script src="https://unpkg.com/swiper/js/swiper.js"> </script>
		<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
		<script>
			
			var appendNumber = 4;
			var prependNumber = 1;
			var swiper = new Swiper('.swiper-container', {
				  loop: true,
				  slidesPerView: 6,
				  centeredSlides: false,
				  spaceBetween: 0,
				  loopedSlides:6,
			  autoplay: {
			      delay: 2500,
			      disableOnInteraction: false,
			   },
			  pagination: {
			    el: '.swiper-pagination',
			    clickable: true,
			  },
			  navigation: {
			    nextEl: '.swiper-button-next',
			    prevEl: '.swiper-button-prev',
			  },
			});
			</script>
		
</body>
</html>